<template>
	<view class="qualificationList">
		<view class="title">
			<text class="h4">必填信息</text>
			<text class="keyPoint">(资料需在有效期内加盖公章)</text>
		</view>

		<view class="list">
			<view class="item" v-for="(i,j) in required" :key="j">
				<view class="img" @click="whetherUploadImg(i)">
					<image :src="i.filePath" />
					<uni-icons type="plusempty" size="20" color="white" class="icons"></uni-icons>
				</view>
				<view class="status" :style="i.applyStatus === 'APPLY'?'background:#EF231B':''">
					{{matchingStatus(i)}}
				</view>
				<view class="text">{{i.classificationName}}</view>
			</view>
		</view>

		<view class="title">
			<text>选填信息</text>
		</view>

		<view class="list" style="margin-bottom:200rpx">
			<view class="item" v-for="(i,j) in optional" :key="j">
				<view class="img" @click="whetherUploadImg(i)">
					<image :src="i.filePath" />
					<uni-icons type="plusempty" size="20" color="white" class="icons"></uni-icons>
				</view>
				<view class="status" :style="i.applyStatus === 'APPLY'?'background:#F5622F':''">
					{{matchingStatus(i)}}
				</view>
				<view class="text">{{i.classificationName}}</view>
			</view>
		</view>

		<button class="register_button" @click="submitForm" v-if="applyStatus==='APPLY'">完成</button>

		<!-- 提交确认 弹窗 -->
		<Dialog :dialog="dialogVisible" title="温馨提示" content="提交审核，请确认上传的资质真实无误，上传之后不可删除、不可修改" @confirm="dialogConfirm"
			@cancel="dialogVisible=false">
		</Dialog>

	</view>
</template>

<script>
	import jwtDecode from 'jwt-decode'
	import {
		getClassification,
		auditing
	} from '@/api/reg/index'
	import Dialog from '@/components/dialog'

	export default {
		components: {
			Dialog
		},
		data() {
			return {
				purchaserId: '',
				required: [],
				optional: [],
				applyStatus: '',
				dialogVisible: false,
			}
		},
		onShow() {
			let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
			this.purchaserId = a.purchaserId
			getClassification(a.purchaserId).then(res => {
				if (res.code === 200) {
					this.required = res.data.requireds
					this.optional = res.data.optionals
					this.applyStatus = res.data.applyStatus
				}
			})
		},
		methods: {
			dialogConfirm() {
				auditing(this.purchaserId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '成功提交',
							mask: true
						})
						uni.removeStorageSync('token')
						uni.reLaunch({
							url: '/pages_user/reg/index'
						})
					}
				}).finally(() => this.dialogVisible = false)
			},
			submitForm() {
				const a = this.required.every(item => {
					return item.id
				})
				if (a) {
					this.dialogVisible = true
				} else {
					uni.showToast({
						icon: 'none',
						title: '有必传的图片未上传',
						mask: true
					})
				}
			},
			whetherUploadImg(e) {
				if (e.applyStatus === 'WAIT_AUDIT') {
					uni.showToast({
						icon: 'none',
						title: '正在审核中，请耐心等待',
						mask: true
					})
					return
				}
				uni.navigateTo({
					url: `/pages_user/reg/qualificationItem?type=${e.classificationId}&purchaserId=${this.purchaserId}&name=${e.classificationName}`
				})
			},
			matchingStatus(e) {
				let a = e.filePath
				let b = '待补充'
				if (a) {
					if (e.applyStatus === 'WAIT_AUDIT') b = '已填写'
					if (e.applyStatus === 'REVIEW') b = '审核通过'
					if (e.applyStatus === 'UPLOADED') b = '已上传'
				}
				return b
			},
		},
	}
</script>

<style lang="scss" scoped>
	.qualificationList {
		padding: 25rpx;
		background: #f9f9f9;

		.title,
		.list {
			background: #fff;
		}

		.title {
			border-radius: 10rpx 10rpx 0 0;
			padding: 48rpx 0 37.5rpx 24.31rpx;

			text {
				font-size: 35rpx;
				font-weight: 500;
			}

			.keyPoint {
				font-size: 17rpx;
				color: #ef231b;
				margin-left: 13rpx;
			}

			.h4::before {
				content: "*";
				color: #ef231b;
			}
		}

		.list {
			border-radius: 0 0 10rpx 10rpx;
			margin-bottom: 25rpx;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			padding: 0 18.06rpx;

			.item {
				margin-bottom: 41.67rpx;

				.img {
					width: 319rpx;
					height: 249rpx;
					background: #f9f9f9;
					border-radius: 7rpx;
					position: relative;

					image {
						width: 319rpx;
						height: 249rpx;
						display: block;
					}

					.icons {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						color: #fff;
						padding: 20rpx;
						background: rgba($color: #000000, $alpha: 0.4);
						border-radius: 50%;
						transform: translate(-50%, -50%);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.status {
				width: 319rpx;
				height: 49rpx;
				line-height: 49rpx;
				background: #2871fc;
				border-radius: 7rpx;
				text-align: center;
				color: #ffffff;
				font-size: 29rpx;
			}

			.text {
				line-height: 1;
				font-size: 28rpx;
				text-align: center;
				margin-top: 27.78rpx;
			}
		}

		.register_button {
			width: 667rpx;
			height: 72rpx;
			background: #2871fc;
			border-radius: 36rpx;
			color: #fff;
			font-size: 29rpx;
			position: fixed;
			left: 50%;
			bottom: 104rpx;
			transform: translateX(-50%);
			z-index: 10;
		}
	}
</style>